<template>
  <!-- 我的页面 -->
  <view>
    <!-- 整个box -->
    <view class="box">
      <!-- 业主信息 -->
      <view class="box1">
        <view>
          <view class="text">业主姓名：</view>
          <view>{{userInfo.name}}</view>
        </view>
        <view>
          <view class="text">手机号码：</view>
          <view>{{userInfo.tel}}</view>
        </view>
        <view>
          <view class="text">家庭住址：</view>
          <view>{{userInfo.address}}</view>
        </view>
      </view>
    </view>
    <!-- 自定义tabBar -->
    <view>
      <u-tabbar :value="tabBarIndex" :fixed="true" @change="tabBarchange" :placeholder="false" activeColor="#1296db"
        :safeAreaInsetBottom="false">
        <block v-for="(item,index) in tabBarList" :key="index">
          <u-tabbar-item :text="item.text">
            <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
            <image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
          </u-tabbar-item>
        </block>
      </u-tabbar>
    </view>
  </view>
</template>

<script>
  // 按需导入 mapState ,mapMutations,mapGetters 辅助函数
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        
      };
    },
    computed: {
      // 将 m_user 模块中的 userType 数据映射到当前页面中使用
      ...mapState('m_user', ['userType', 'userInfo']),
      ...mapState('m_tabbar', ['tabBarList', 'tabBarIndex']),
    },
    methods: {
      ...mapMutations('m_tabbar', ['updateTabBarList', 'updateTabBarIndex']),
      tabBarchange(name) {
        uni.switchTab({
          url: this.tabBarList[name].pagePath
        })
        // this.tabBarIndex = name;
        this.setTabBarIndex(name);
      },
      setTabBarIndex(index) {
        this.updateTabBarIndex(index);
      }
    }
  }
</script>

<style lang="scss">
  .box {
    padding: 30rpx;
  }

  .box1,
  .box2 {
    border-radius: 30rpx;
    margin-bottom: 30rpx;
    padding: 25rpx;
    box-shadow: 0 0 15rpx #999999
  }

  .box1>view,
  .box2>view {
    padding: 10rpx;
    display: flex;
    margin-bottom: 10rpx;
    font-family: Microsoft YaHei;

    color: #333333;
  }

  .text {
    width: 30%;
    text-align: left;
    overflow: auto;
  }
  .u-page {
    padding: 0;
  
    &__item {
  
      &__title {
        color: $u-tips-color;
        background-color: $u-bg-color;
        padding: 30rpx;
        font-size: 30rpx;
  
        &__slot-title {
          color: $u-primary;
          font-size: 30rpx;
        }
      }
  
      &__slot-icon {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
</style>
